<template>
  <div>
    <div class="display-flex padding-t-xs">
      <div class="flex-size-auto">
        <h6
          class="text-ellipsis padding-l-xs"
          style="max-width: 200px"
          :title="(item.title || '') + '(' + item.name + ')'"
        >
          <a-popover
            v-if="item.help || item.type === 'model'"
            placement="left"
            :overlayStyle="{ maxWidth: '300px' }"
            :destroyTooltipOnHide="true"
          >
            <mpd-icon class="cursor-pointer margin-r-xs" icon="mpd-icon-question" style="font-size: 14px"></mpd-icon>
            <template #title v-if="item.type === 'model'">
              <div style="word-wrap: break-word">例：this.mpdPageValue.arg1</div>
            </template>
            <template #content>
              <div style="word-wrap: break-word" v-text="item.help"></div>
            </template>
          </a-popover>
          <span>{{ item.title }}</span>
          <span>({{ item.name }})</span>
        </h6>
      </div>
      <div style="width: 100px" v-if="item.inputList.length > 1">
        <a-select
          style="width: 100%"
          size="small"
          v-model="selectPageNodeDom[actionItem.selectItemKey].mpdConfig.configTmp[`${item.type}.${item.name}`]"
        >
          <a-select-option
            v-for="(inputItem, inputIndex) in item.inputList"
            :key="inputIndex"
            :value="inputItem.component"
          >
            {{ inputItem.title || inputItem.component }}
          </a-select-option>
        </a-select>
      </div>
    </div>
    <template v-for="(inputItem, inputIndex) in item.inputList">
      <component
        :key="inputIndex"
        v-if="
          selectPageNodeDom[actionItem.selectItemKey].mpdConfig.configTmp[`${item.type}.${item.name}`] ===
            inputItem.component
        "
        class="width-full"
        :is="transformComponent(item)"
        v-bind="transformAttr(item)"
        v-on="transformEvent(item)"
      ></component>
    </template>
  </div>
</template>

<script>
import { addComponentConfigDefaultEvent, addComponentConfigDefaultAttr } from '@/util/transformUtil'
import MpdArrayTable from '@/components/config/ArrayTable.vue'

export default {
  components: {
    MpdArrayTable
  },
  props: {
    item: {
      type: Object,
      required: true
    },
    actionItem: {
      type: Object,
      required: true
    }
  },
  inject: ['selectPageNodeDom'],
  methods: {
    // 转换渲染的模板
    transformComponent(item) {
      return this.selectPageNodeDom[this.actionItem.selectItemKey].mpdConfig.configTmp[`${item.type}.${item.name}`]
    },
    // 转换属性参数，让其可以访问当前item的值
    transformAttr(item) {
      const newAttrObj = {
        mpdItem: this.item
      }
      if (item.inputList && item.inputList.length > 0) {
        const configTmpKey = `${item.type}.${item.name}`
        for (const index in item.inputList) {
          if (
            item.inputList[index].component ===
            this.selectPageNodeDom[this.actionItem.selectItemKey].mpdConfig.configTmp[configTmpKey]
          ) {
            const attrObj = item.inputList[index].attr
            for (const key in attrObj) {
              const element = attrObj[key]
              if (typeof element === 'string' && element.startsWith('$:')) {
                newAttrObj[key] = eval(element)
              } else {
                newAttrObj[key] = element
              }
            }
            // 添加默认属性
            addComponentConfigDefaultAttr(
              this.selectPageNodeDom[this.actionItem.selectItemKey],
              item,
              item.inputList[index],
              newAttrObj
            )
            break
          }
        }
      }
      return newAttrObj
    },
    // 转换事件参数，让其内部调用可以正常获取参数
    transformEvent(item) {
      const newEventObj = {}
      if (item.inputList && item.inputList.length > 0) {
        const configTmpKey = `${item.type}.${item.name}`
        for (const index in item.inputList) {
          if (
            item.inputList[index].component ===
            this.selectPageNodeDom[this.actionItem.selectItemKey].mpdConfig.configTmp[configTmpKey]
          ) {
            const eventObj = item.inputList[index].event
            const _this = this
            for (const key in eventObj) {
              const element = eventObj[key]
              newEventObj[key] = function() {
                element.call(_this, ...arguments)
              }
            }
            // 添加默认事件
            addComponentConfigDefaultEvent(
              this.selectPageNodeDom[this.actionItem.selectItemKey],
              item,
              item.inputList[index],
              newEventObj
            )
            break
          }
        }
      }
      return newEventObj
    }
  }
}
</script>
